<template>
	<view class="page">
		<!-- 头部背景 -->
		<view class="head-bg">
			<view class="head-user">
				<view class="user">
					<!-- <image src="/static/img/user_pic.jpg" mode=""></image>
					<text>爱跳舞的汤姆</text> -->
				</view>
				<view class="exchange" @click="goUrl('/pages/ConsumeRecord/ConsumeRecord')">
					<text>明细</text>
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="integral-balance">
				<view class="integral" @click="onIntegral" v-if="dataInfo.is_sign===2">
					<text>当前礼品卡</text>
					<text class="number">{{dataInfo.balance2}}</text>
					<text class="btn" :class="{'action':dataInfo.is_sign===1}">{{dataInfo.is_sign===2?'立即签到':'恭喜签到成功'}}</text>
				</view>
				<view class="" v-else style="background: #fff;border-radius: 100%;width: 200rpx;height: 200rpx;text-align: center;color: #f20;padding-top: 55rpx;font-weight: bold;">
					<view class="" style="font-size: 36rpx;">签到</view>
					<view class="" style="font-size: 36rpx;">成功</view>
				</view>
			</view>
			<view class="" style="text-align: center;color: #fff;margin-top: 20rpx;">累计签到 {{dataInfo.total_sign_count||0}} 天</view>
			<view class="bg">
				<image src="/static/integral_bg1.png" mode=""></image>
			</view>
		</view>
		<!-- 签到 -->
		<view class="Signin-data">
			<view class="flex flex-align flex-center seeZhibo">
				观看直播时长 : <view>{{showtime}}</view>
			</view>
			<!-- <view class="signin-title">
				<view class="title">
					<text>每日签到</text>
				</view>
			</view>
			<view class="day-list">
				<view class="list" v-for="(item,index) in dateList"  :class="item.is_sign==1?'action':''" :key="index">
					<view class="circle">
						<text v-if="item.is_sign==2">+{{item.reward}}</text>
						<text class="iconfont icon-duihao" v-if="item.is_sign==1"></text>
					</view>
					<view class="day">
						<text>{{item.date}}</text>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 签到提示弹窗 -->
		<view class="sigin-hint">
			<view class="cu-modal" :class="{'show':isSignin}">
			  <view class="cu-dialog">
			    <view class="cu-bar bg-white justify-end">
			      <view class="content">签到成功</view>
			      <view class="action">
			        <text class="cuIcon-close text-red" @click="isSignin = false"></text>
			      </view>
			    </view>
			    <view class="sigin-content">
						<view class="icon">
							<text class="iconfont icon-signin"></text>
						</view>
						<view class="title">
							<view>恭喜您，连续签到<text>3</text>天，获得<text>7</text>积分</view>
						</view>
						<view class="hint">
							<text>连续签到7天可获得额外奖励</text>
						</view>
						<view class="btn" @click="isSignin = false">
							<text>我知道了</text>
						</view>
					</view>
			  </view>
			</view>
		</view>
		<!-- 规则说明弹窗 -->
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
			  <view class="cu-dialog">
			    <view class="cu-bar bg-white justify-end">
			      <view class="content">规则说明</view>
			      <view class="action">
			        <text class="cuIcon-close text-red" @click="isRule = false"></text>
			      </view>
			    </view>
			    <view class="rule-content">
						<text>
							1.签到第1天送5积分，连续签到第2天送6积分，以此类推，连续签到第7天可获额外红包奖励。第8天签到则重新开始-个七日轮回，视为首日签到;若签到中断则重新计算;
							2.在幸福集市任意门店内，可进行门店打卡，将获赠额外积分，每日1次机会;
							4.本活动的红包奖励、宝箱奖励均为优惠券形式，具体面额、有效时间、使用渠道以实际到账的优惠券为准;
							5.积分可在“积分明细”中查询，优惠券可在“会员-优惠券”中查看。
						</text>
					</view>
			  </view>
			</view>
		</view>
		<tui-keyboard :radius="radius" :show="show" @close="closeKeyboard" @click="keyboardClick">
			<view class="tui-digital-box">
				<view class="tui-keyboard-tips">签到口令</view>
				<tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input>
			</view>
		</tui-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSignin: false,
				SigninStatus: 0,
				// 规则
				isRule: false,
				dataInfo:'',
				dateList:'',
				show: false,
				numberArr: [],
				pwdArr: ["", "", "", "", "", ""],
				temp: ["", "", "", "", "", ""],
				radius: false,
				showtime:'0时0分0秒'
			};
		},
		onShow() {
			this.getData()
		},
		methods:{
			/**
			 * 签到点击
			 */
			onIntegral(){
				let that = this
				if(this.dataInfo.is_sign==1){
					return
				}
				that.switchKeyboard(3)
				
			},
			goUrl(e){
				this.tui.href(e)
			},
			switchKeyboard(index) {
				let length = index; //e.currentTarget.dataset.length;
				let arr = ["", "", "", "", "", ""]
				let radius = false
				if (length == 4) {
					arr = ["", "", "", ""]
					radius = true
				}
				if (length == 3) {
					arr = ["", "", ""]
					radius = true
				}
				this.pwdArr = arr;
				this.temp = arr;
				this.numberArr = [];
				this.radius = radius;
				this.show = true
			},
			getData(){
				let that = this
				that.tui.request("api.auth.live/signInfo", "post", {}, false,false, true).then((res) => {
					that.dataInfo = res.data
					that.dateList = res.data.list
					that.convertToHMS(res.data.time)
				}).catch((res) => {})
			},
			convertToHMS(seconds) {
			  const hours = Math.floor(seconds / 3600);
			  const minutes = Math.floor((seconds % 3600) / 60);
			  const remainingSeconds = seconds % 60;
			  this.showtime = `${hours} 时 ${minutes} 分 ${remainingSeconds} 秒`;
			},
			closeKeyboard: function() {
				this.show = false;
				this.numberArr = [];
				this.pwdArr = this.temp
			},
			keyboardClick: function(e) {
				let numberArr = this.numberArr;
				let pwdArr = this.pwdArr;
				let index = e.index;
				if (numberArr.length === pwdArr.length || index == undefined) {
					return;
				}
				if (index == 9) { //取消键
					this.closeKeyboard();
					return;
				} else if (index == 11) {
					//退格键
					let len = numberArr.length;
					if (len) {
						pwdArr.splice(len - 1, 1, "");
					} else {
						pwdArr = this.temp;
					}
					numberArr.pop()
				} else if (index == 10) {
					numberArr.push(0);
					pwdArr.splice(numberArr.length - 1, 1, "●");
				} else {
					numberArr.push(index + 1);
					pwdArr.splice(numberArr.length - 1, 1, "●");
				}
				this.numberArr = numberArr;
				this.pwdArr = pwdArr;
				this.getPwd();
			},
			getPwd: function() {
				//判断并取出密码
				let that = this
				if (this.numberArr.length === this.pwdArr.length) {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					setTimeout(() => {
						let pwd = this.numberArr.join('')
						this.closeKeyboard();
						that.tui.request("api.auth.live/signCommand", "post", {command:pwd}, false,false, true).then((res) => {
							that.tui.toast(res.info)
							if(res.code==1){
								that.getData()
							}
						}).catch((res) => {})
					}, 800);
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'SignIn.scss';
	.tui-keyboard-tips {
		width: 100%;
		height: 120rpx;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		background: #fff;
		position: relative;
		color: #333;
		border: 0;
	}
	
	.tui-digital-box {
		background: #fff;
		padding-bottom: 50rpx;
		border: 0;
	}
</style>
